<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Portfelo</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="script/main.js"></script> 
<style>
ul {}
ul li {float:left; list-style:none; position:relative; }
ul li a.next {position:absolute; left:100px;}
ul li a.previous{position:absolute; left:0px;}
ul li a.startover{position:absolute; left:200px;}

body {
background-color:black;
color:white;
}

div.topRightToolbar {
    font-family:Geogrotesque-Semibold, Helvetica, Arial, sans-serif;
    width:30%;
	color:white;
    background: rgb(10,10,10);
    filter:alpha(opacity=90);
    right:0%;
	top: 1%;
    position:absolute;
    text-align: left;
    padding-left:10px;
    padding-right:10px;
    padding-top:2px;
    padding-bottom:2px;
}


div#titlePanelOnBottom
{
font-family: Geogrotesque-Semibold, Helvetica, Arial, sans-serif;
	width:14.5%;
	color:white;
	background: rgb(10, 10, 10);
	filter:alpha(opacity=90);
	left: 2%;
	bottom: 5%;
	position: absolute;
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
	padding-top:10px;
	padding-bottom: 10px;
}


div#titlePanel {
	font-family: Geogrotesque-Semibold, Helvetica, Arial, sans-serif;
	font-size:40px;
	color:white;
	background: rgb(10, 10, 10);
	filter:alpha(opacity=90);
	width:62%;
	height:71%;
	left: 21.6%;
	top: 11.2%;
	position: absolute;
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
	padding-top:10px;
	padding-bottom: 10px;
	display:none;
}

div.leftSideBar{
	font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana",
		"sans-serif";
	font-size: 20px;
	color:white;
	background: rgb(10, 10, 10);
	filter:alpha(opacity=90);
	left: 2%;
	top: 6%;
	width:14.5%;
	height:64%;
	position: absolute;
	text-align: center;
	padding-top:5px;
	padding-bottom: 5px;
}


ol {
	list-style-type: none;
	margin:1px 5px 10px 1px;
	text-decoration: none; 
	color:white;
}

a{
color:white;
text-decoration:none; 
}

}
</style>
</head>
<body>



<ul>
<li><img src="C:\Users\Hansol\workspace\Portfelohtml\jalba1.jpg" width = "800" height = "600" /><a class="next" href="#">next</a></li>
<li><img src="C:\Users\Hansol\workspace\Portfelohtml\jalba2.jpg" width = "800" height = "600" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="C:\Users\Hansol\workspace\Portfelohtml\jalba3.jpg" width = "800" height = "600" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="C:\Users\Hansol\workspace\Portfelohtml\jalba4.jpg" width = "800" height = "600" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li>
</ul>

    <div class="topRightToolbar">

        <!--Search Bar, with placeholder text "Search" -->
        <input id="searchBar" type="search" placeholder="search"/>
        
        <!-- Current User's name> -->
        <a id="CurrentUserID" href="#" >Username</a>
        <!-- Script, so that we can update the current user's name according to the controller -->

        <!--Settings icon and link-->
        <a id="settings" href="external"><img src="asterisk_orange.png"/></a>
        <!-- Script for the settings link if needed -->

    </div>

<div class="leftSideBar">
<img src="C:\Users\Hansol\workspace\Portfelohtml\profilepic.png" alt="Jessica" width ="120" height = "120">

<ol>
<li><a href="#" rel="external">Name</a></li>
<li><a href="#" rel="external">Location</a></li>
<li><a href="#" rel="external">Connections</a></li>
<li><a href="#" rel="external">About</a></li>
<li><a href="#" rel="external">Photos</a></li>
<li><a href="#" rel="external">Message</a></li>
<li><a href="#" rel="external">Share</a></li>
<li><a href="#" rel="external">CurrentAlbum</a></li>
</ol>
</div>



<div id="titlePanelOnBottom" onclick = "displayTitlePanel()" >
<a href="#" rel="external">Sample Image</a>
</div>


<div id="titlePanel">
<a href="#" rel="external">Sample Image</a>
<br>
<a href="#" rel="external">Sample Detail</a>
</div>




</body>
</html>